<template>
  <KView class="goods-classify-menu">
    <KView class="goods-classify-menu-content">
      <KView v-for="type in typeList" :key="`menu_${type.id}`" class="goods-classify-menu-item" :class="{select:type===curType}"
        @click="typeChange(type)">
        <span>{{type.name}}</span>
        <template v-if="type===curType">
          <KView class="menu-select-line"></KView>
        </template>
        <KView v-if="typeData[type.id]>0" class="goods-classify-count">{{typeData[type.id]}}</KView>
      </KView>
    </KView>
    <KView class="goods-classify-menu-null"></KView>
  </KView>
</template>

<script>
  export default {
    props: {
      typeList: {
        type: Array,
        required: true
      },
      buyRecord: {
        type: Object,
        required: true
      },
      curType: {
        type: Object,
        required: true
      }
    },

    watch: {
      'buyRecord.goodsModelIds'() {
        this.typeData = this.buyRecord.getTypeCountData();
      }
    },

    data() {
      return {
        typeData: this.buyRecord.getTypeCountData()
      };
    },

    methods: {
      typeChange(type) {
        if (this.curType === type) {
          return;
        }

        this.$emit('update:curType', type);
        this.$emit('change', type);
      }
    }
  };

</script>

<style lang="scss">
  .goods-classify-menu {
    height: 100%;
    overflow: auto;
    background: #f5f6f9;

    .goods-classify-menu-content {
      .goods-classify-menu-item {
        padding: formatPx(23) 0;
        text-align: center;
        margin-bottom: formatPx(20);
        position: relative;

        &:last-child {
          margin-bottom: 0;
        }

        &.select {
          background: #ffffff;
        }

        >span {
          font-size: formatPx(30);
          vertical-align: top;
        }

        .menu-select-line {
          position: absolute;
          left: 0;
          top: formatPx(23);
          height: formatPx(48);
          width: formatPx(10);
          background: #59C264;
        }

        .goods-classify-count {
          position: absolute;
          right: 0;
          top: 0;
          background: #FF5124;
          color: #ffffff;
          width: formatPx(36);
          height: formatPx(36);
          line-height: formatPx(36);
          font-size: formatPx(28);
          border-radius: formatPx(18);
          text-align: center;
        }
      }
    }

    .goods-classify-menu-null {
      height: formatPx(120);
    }
  }

</style>
